<template>
  <div>
    <div id="map-container" style="width: 90%; height: 70vh;">

    </div>
  </div>
</template>
<script>
// 导入地图插件
import AMapLoader from "@amap/amap-jsapi-loader";
import {getWandaApi} from '@/api/home'
export default {
  data(){
    return {
      map:""//存储地图对象
    }
  },
  created(){
    this.$nextTick(()=>{
      this.initMap() //dom准备就绪后初始化地图
    })
  },
  methods:{
    initMap(){ //初始化地图方法
      AMapLoader.load({
          key:"1c5f475b8a1c15525e1c1e94c33137ab", // 申请好的Web端开发者Key，首次调用 load 时必填
           version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
           plugins: [] // 需要使用插件
      }).then(async (AMap)=>{
        // Amap 就是地图操作对象
        // 生成地图
         this.map=new AMap.Map('map-container',{
          viewMode:"3D",//使用3D视图
          zoom:7, //初始化地图的缩放级别   
          center:["114.4532", "38.5229"]//地图中心点的坐标
         })
        //  ------------------------------------------------
        //  获取万达广场列表 并加点到地图上
            let wanDaRes=await getWandaApi()
            console.log(wanDaRes,"万达列表----")
            //  根据返回的列表数据添加 多个点
            wanDaRes.data.forEach(item=>{
              // 循环生成标点
                 let marker=new AMap.Marker({
                    position:[item.longitude, item.latitude],//点的经纬度坐标
                    title:item.name, //标题
                    icon:new AMap.Icon({
                          size: new AMap.Size(40, 50),        // 图标尺寸
                          image: 'https://img2.baidu.com/it/u=1913087757,807205062&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=889',  // 图标的图片URL
                          imageSize: new AMap.Size(40, 50)    // 确保图片显示尺寸正确
                      }),
                     
                  })
                   this.map.add(marker)//将点添加到地图上
            })
        //  -----------------------------------------
        //2 在地图上绘制线段polyline
        // 后台返回的数据 整理成路径数据
        let arrPath=wanDaRes.data.map(item=>{
          return [item.longitude, item.latitude]
        })

        let polyline=new AMap.Polyline({
          path:arrPath, // 设置线段路径  [[精度，维度],[精度，维度]]
          strokeColor: "#3366FF", // 线颜色
          strokeOpacity: 1,     // 线透明度
          strokeWeight: 6,      // 线宽
          strokeStyle: "solid", // 线样式
          strokeDasharray: [10, 5] // 补充线样式
        })
        this.map.add(polyline)//将线添加到地图上
        //  -----------------------------------------
        //  地图上绘制圆形
            let circle=new AMap.Circle({
              center: ["114.58502", "38.01473"], // 圆心位置
              radius: 50000, // 圆半径
              strokeColor: '#FF33FF', // 线颜色
              strokeOpacity: 1, // 线透明度
              strokeWeight: 3, // 线粗细度
              fillColor: '#1791fc', // 填充颜色
              fillOpacity: 0.35 // 填充透明度
          
            })
            this.map.add(circle)//将圆形添加到地图上
        //  -----------------------------------------
      
        // 地图上绘制文字


          
          
      })

    }
  } 

}
</script>